<template>
	<div class="union">
		<div class="i_index_title">
			<span class="index_title">双色球</span>
			<van-icon class="fanhui" @click="fanhui" name="arrow-left" />
		</div>
		<div class="app">
			<div class="redball">
				<div class="redball_title">
					<span class="redball_title_ball">红球</span>
					<span class="redball_title_haoma">请选择6个号码</span>
				</div>
				<ul class="ball_oul">
					<li v-for="(item,index) in redball" @click="zered(item,index)" :class="item.show? 'hong':'ball_oli'">
						<span class="neizi">{{item.value}}</span>
					</li>
				</ul>
			</div>
			<div class="redball">
				<div class="redball_title">
					<span class="redball_title_ball">蓝球</span>
					<span class="redball_title_haoma">请选择1个号码</span>
				</div>
				<ul class="ball_oul">
					<li v-for="(item,index) in blueball" @click="zeblue(item,index)" :class="item.show? 'lan':'ball_oli'">
						<span class="neizi">{{item.value}}</span>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="huakuai" @click="show=true">
			<div class="multiple">
				<p>倍数</p>
				<span>最大五十倍</span>
			</div>
			<div class="quantity" @click.stop>
				<van-stepper v-model="value" max="50"/>
				<van-icon name="arrow" />
			</div>
			<div class="notarize1" @click.stop="tianjia">
				<span>
					加入已选
				</span>
			</div>
			<div class="notarize" @click.stop="tianjia">
				<span>
					确认
				</span>
			</div>
		</div>
		<van-action-sheet v-model="show">
			<div class="content">
				<div class="content_title">
					<div class="hong" style="margin-top: 10px;"><span class="neizi">{{shuangse.length}}</span></div>
					<span style="font-weight: 600;">号码列表</span>
					<span style="margin-left: 50px; font-size: 19px;font-weight: 600;">倍数</span>
					<div style="margin-left: 10px;">
						<van-stepper v-model="value" max="50"/>
					</div>
					<div class="box" @click="show=false">
						<van-icon name="cross" />
					</div>
				</div>
				<ul class="content_oul">
					<li v-for="(item,index) in shuangse">
						<div class="content_oli_ball" v-for="(ite,idx) in item.red">{{ite}}</div>
						<div class="content_oli_ball_blue" v-for="(ite,idx) in item.blue">{{ite}}</div>
						<div class="ball_icon" @click="balldelete(index)"><van-icon name="delete-o" /></div>
					</li>
				</ul>
				<div class="tc_tj">
					<div class="jine">￥{{jisuan}}</div>
					<div class="qingchu" @click="qingchu()">
						<span>清除号码</span>
					</div>
					<div class="hm_tijiao" @click="goorder">
						<span>提交订单</span>
					</div>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { Dialog } from 'vant';
	export default{
		data(){
			return {
				show:false,
				value:1,
				redball:[
					{value:'01',show:false},
					{value:'02',show:false},
					{value:'03',show:false},
					{value:'04',show:false},
					{value:'05',show:false},
					{value:'06',show:false},
					{value:'07',show:false},
					{value:'08',show:false},
					{value:'09',show:false},
					{value:'10',show:false},
					{value:'11',show:false},
					{value:'12',show:false},
					{value:'13',show:false},
					{value:'14',show:false},
					{value:'15',show:false},
					{value:'16',show:false},
					{value:'17',show:false},
					{value:'18',show:false},
					{value:'19',show:false},
					{value:'20',show:false},
					{value:'22',show:false},
					{value:'23',show:false},
					{value:'24',show:false},
					{value:'25',show:false},
					{value:'26',show:false},
					{value:'27',show:false},
					{value:'28',show:false},
					{value:'29',show:false},
					{value:'30',show:false},
					{value:'31',show:false},
					{value:'32',show:false},
					{value:'33',show:false},
				],
				blueball:[
					{value:'01',show:false},
					{value:'02',show:false},
					{value:'03',show:false},
					{value:'04',show:false},
					{value:'05',show:false},
					{value:'06',show:false},
					{value:'07',show:false},
					{value:'08',show:false},
					{value:'09',show:false},
					{value:'10',show:false},
					{value:'11',show:false},
					{value:'12',show:false},
					{value:'13',show:false},
					{value:'14',show:false},
					{value:'15',show:false},
					{value:'16',show:false},
				],
				reditem:[],
				blueitem:[],
				shuangse:[]
			}
		},
		components: {
		  [Dialog.Component.name]: Dialog.Component,
		},
		computed:{
			jisuan(){
				let aa=0
				this.shuangse.forEach((item)=>{
					aa+=item.num
				})
				return aa*this.value
			}
		},
		methods:{
			fanhui(){
				this.$router.go(-1);
			},
			zered(item,index){
				let aa=[]
				if(this.reditem.length<6){
					item.show=!item.show
				}else{
					this.reditem.forEach((ine)=>{
						if(item.value==ine.value){
							item.show=false
						}
					})
				}
				this.redball.forEach((ite)=>{
					if(ite.show){
						aa.push(ite)
					}
				})
				this.reditem=aa
				console.log(this.reditem)
			},
			zeblue(item,index){
				let aa=[]
				if(this.blueitem.length<1){
					item.show=!item.show
				}else{
					this.blueitem.forEach((ine)=>{
						if(item.value==ine.value){
							item.show=!item.show
						}
					})
				}
				this.blueball.forEach((ite)=>{
					if(ite.show){
						if(aa.length<7){
							aa.push(ite)
						}
					}
				})
				this.blueitem=aa
				console.log(this.blueitem)
			},
			tianjia(){
				if(this.reditem.length==6){
					if(this.blueitem.length==1){
						let red=[]
						let blue=[]
						this.reditem.forEach((item)=>{
							red.push(item.value)
						})
						this.blueitem.forEach((item)=>{
							blue.push(item.value)
						})
						let aa={
							red:red,
							blue:blue,
							num:2
						}
						this.shuangse.push(aa)
						Toast('添加成功');
						this.show=true
						this.redball.forEach((item)=>{
							item.show=false
						})
						this.blueball.forEach((item)=>{
							item.show=false
						})
						this.reditem=[]
						this.blueitem=[]
						console.log(this.shuangse)
					}else{
						Toast('请选择号码');
					}
				}else{
					Toast('请选择号码');
				}
			},
			balldelete(index){
				console.log(index)
				this.shuangse.splice(index, 1);
			},
			qingchu(){
				Dialog.confirm({
				  message: '确认清除号码？',
				})
				  .then(() => {
				    // on confirm
						this.shuangse=[]
				  })
				  .catch(() => {
				    // on cancel
				  });
			},
			goorder(){
				if(this.shuangse!=''){
					let et=[]
					this.shuangse.forEach((item)=>{
						let re={
							"buyCount": this.value,
							"ticketCode":JSON.stringify({red:item.red,blue:item.blue}),
							"buyType": 2,
						}
						et.push(re)
					})
					console.log(et)
					this.$axios.post('http://a.chuxingcai.com/prod-api/webapi/order/submit',{
							"ticketId":2,
							"couponItemId": 0,
							"items": et
					},{
						headers:{
							token:window.sessionStorage.getItem('token')
						}
					}).then((res) => {
						console.log(res.data)
						this.$router.push({path:'/order',query:res.data.data})
					})
				}else{
					Toast('请添加号码');
				}
			}
		}
	}
</script>

<style scoped>
		*{margin: 0; padding: 0;}
	.i_index_title{
		width: 100%;
		height: 50px;
		background-color: #F74A4B;
		position: relative;
	}
	.fanhui{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		font-size: 30px;
		color: white;
	}
	.hong{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		margin: 5px;
		color: white;
		position: relative;
	}
	.lan{
		width: 30px;
		height: 30px;
		background-color: dodgerblue;
		border-radius: 50%;
		color: white;
		margin: 5px;
		position: relative;
	}
	.index_title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: white;
	}
	.content_title{
		height: 50px;
		display: flex;
		margin: 10px;
		line-height: 50px;
		/* border: 1px solid red; */
	}
	.content_oul{
		max-height: 300px;
		/* border: 1px solid blue; */
		overflow: hidden;
		overflow: scroll;
	}
	.content_oul>li{
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		position: relative;
	}
	.ball_icon{
		position: absolute;
		font-size: 18px;
		top: 50%;
		transform: translate(0,-50%);
		right: 20px;
	}
	.content_oli_ball{
		width: 30px;
		height: 30px;
		background-color: red;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.content_oli_ball_blue{
		width: 30px;
		height: 30px;
		background-color: royalblue;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 30px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.huakuai{
		width: 100%;
		height: 50px;
		background: white;
		position: fixed;
		display: flex;
		bottom: 0;
	}
	.multiple{
		width: 100px;
		margin-left: 20px;
		/* border: 1px solid red; */
	}
	.multiple>p{
		font-size: 20px;
	}
	.multiple>span{
		font-size: 10px;
		border: 1px solid black;
	}
	.quantity{
		width: 130px;
		/* border: 1px solid red; */
		
		font-size: 20px;
		line-height: 50px;
	}
	.quantity>span{
		font-size: 25px;
	}
	.notarize{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.notarize_ad{
		width: 70px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: #ff9292;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.notarize1{
		width: 90px;
		height: 30px;
		margin-top: 10px;
		margin-right: 10px;
		background-color: red;
		color: white;
		border-radius: 50px;
		text-align: center;
		line-height: 30px;
	}
	.redball{
		width: 95%;
		background-color: white;
		margin: 10px auto;
		border-radius: 5px;
	}
	.redball_title{
		height: 40px;
		width: 95%;
		margin: 0 auto;
		position: relative;
	}
	.redball_title_ball{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		color: #F74A4B;
	}
	.redball_title_haoma{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0,-50%);
	}
	.ball_oul{
		width: 100%;
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fill, 45px);
	}
	.ball_oli{
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 50%;
		margin: 5px;
		position: relative;
	}
	.neizi{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.tc_tj{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.tc_tj>div{
		margin-top: 10px;
		height: 30px;
	}
	.jine{
		flex: 2;
		color:#F74A4B;
		/* border: 1px solid red; */
	}
	.qingchu{
		flex: 1;
		border: 1px solid #F74A4B;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: white;
		color:#F74A4B;
		text-align: center;
		line-height: 30px;
	}
	.hm_tijiao{
		flex: 1;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 30px;
		background-color: #F74A4B;
		color:white;
		text-align: center;
		line-height: 30px;
	}
	.box{
		width: 25px;
		height: 25px;
		position: absolute;
		border-left: 1px solid #d0d0d0;
		margin-top: 10px;
		right: 15px;
		text-align: right;
		line-height: 30px;
		font-size: 18px;
		color: #d0d0d0;
	}
</style>
